<!DOCTYPE html>
<!--说明这个文档符合html5标准
加上这一句之后:就必须把html标签考虑进去,html标签也会在网页展示,默认高度是0,如果要设置body高度100%之前,要设置html高度100%-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="刘亚彬">
        <title></title>
        <style>
            html{
                height: 100%;
            }
            body{
                height: 100%;
                /*渐变使用的是background-image属性 */
                /*red (%0) 红色从顶部开始显示*/
                /*red 50% 红色到中间位置停止显示*/
                /*blue 50% 蓝色从中间位置开始显示*/
                /*blue (100%) 蓝色到结束位置停止显示*/
                /*用角度设置方向:0deg是从下向上,90deg从左向右按顺时针方向转动设置*/
                background-image: linear-gradient(0deg, red 0%,red 50%,rgba(0,0,0,0) 50% ,rgba(0,0,0,0)), linear-gradient(90deg,yellow 0%,yellow 30%,black 30% ,black 70%,white 70% ,white);
                /*先写的效果是在上层*/
                /*组合渐变,不同的渐变过程之间用逗号隔开*/
                
                

            }
        </style>
    </head>
    <body>
        
    </body>
</html>